<template>
	<view class="mord">
		<view class="top">
			<view @click='tab(0)' :class="{'active':num==0}">
				已购买({{count[0]}})
			</view>
			<view @click='tab(1)' :class="{'active':num==1}">
				已使用({{count[1]}})
			</view>
			<view @click='tab(2)' :class="{'active':num==2}">
				已作废({{count[2]}})
			</view>
			<view @click='tab(9)' :class="{'active':num==9}">
				已转让({{count[9]}})
			</view>

		</view>
		<scroll-view @scrolltolower='sc' scroll-y="true" class="ddlist" lower-threshold="20">

			<view class="li" v-for="l in data" :key='l.id'>
				<view class="li-up" :style="{backgroundImage:'url('+l.cImgName+')'}">

					<view class="r" :style="{color:l.fontColor}">
						￥<text>{{l.reduceAmount}}</text>
					</view>
				</view>


				<view class="butbox">
					<view class="info">
						<view class="no">卡号：{{l.code}}</view>
						<view class="pass">密码：{{l.password}}</view>
						<view class="pass" v-if="num == 1">使用时间：{{l.useDate}}</view>
						<view class="pass" v-if="num == 2">过期时间：{{l.expireEndDate}}</view>
					</view>
					<view class="btn" @click="turnGiftCard(l.id)" v-if="num == 0">转赠</view>
					<view class="btn" @click="deleteCard(l.id)" v-if="num != 0">删除</view>

				</view>
			</view>

		</scroll-view>
		<prompt :visible.sync="promptVisible" :placeholder="'输入转赠手机号'" :defaultValue="''" @confirm="clickPromptConfirm" mainColor="#e74a39">
		  <!-- 这里放入slot内容-->
		</prompt>
	</view>
</template>

<script>
	import prompt from "../../components/zz-prompt/index.vue"
	export default {
		name: "",
		components: {
			// iCommentId
			prompt
		},
		data() {
			return {
				num: 0,
				data: [],
				liso: [],
				rea: '',
				meng: true,
				cOrderNo: '',
				types: '',
				pageIndex: 1,
				count: [],
				promptVisible:false
			}
		},
		onLoad(options) {
			let that = this;

			that.$Request.post(
				that.$api.httpApi.user.getCountGiftCard + '&token=' + that.$SysCache.get('token'), {

				}
			).then(res => {
				if (res.code == 200) {
					that.count = res.data;
				}
			});

			if (options.id) {
				this.num = options.id
			}
			if (options.id == 1) {
				this.oder('USED');
				this.types = "USED"
			} else if (options.id == 2) {
				this.oder('OBSOLETE');
				this.types = "OBSOLETE"
			} else if (options.id == 3) {
				this.oder('');
				this.types = ""
			} else {
				this.oder('UNUSED');
				this.types = "UNUSED"
			}
		},
		onShow() {
			this.onLoad
		},
		methods: {
			sc() {
				var that = this;
				this.num = id;
				if (id == 1) {
					that.oder('USED');
					this.types = 'USED'
				} else if (id == 2) {
					that.oder('OBSOLETE');
					this.types = 'OBSOLETE'
				} else if (id == 3) {
					that.oder('');
					this.types = ''
				} else {
					that.oder("UNUSED")
					this.types = 'UNUSED'
				}
			},




			del(id) {
				let that = this;
				that.$Request.post(
					that.$api.httpApi.user.delOder + '&token=' + that.$SysCache.get('token'), {
						'orderIds': id
					}
				).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '删除成功！'
						})
						that.oder(that.types);
					}
				});
			},
			sup() {
				let that = this;
				that.$Request.post(
					that.$api.httpApi.user.closeoderOn + '&token=' + that.$SysCache.get('token'), {
						'cOrderNo': that.cOrderNo,
						'reason': that.rea
					}
				).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '取消成功！'
						})
						that.oder(that.types);
						that.meng = false
					}
				});
			},
			out(cSaleReturnNo) {
				let that = this;

				uni.showModal({
					title: "提示",
					confirmText: "确定",
					content: "取消退款",
					success: function(res) {
						if (res.confirm) {
							that.$Request.post(
								that.$api.httpApi.order.cancelSaleReturn + '&token=' + that.$SysCache.get(
									'token'), {
									"cSaleReturnNo": cSaleReturnNo
								}
							).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: res.message
									})
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			closes() {
				this.meng = false
			},
			re(rea) {
				this.rea = rea
			},
			tab(id) {
				this.data = []
				this.pageIndex = 1
				var that = this;
				this.num = id;
				if (id == 1) {
					that.oder('USED');
					this.types = 'USED'
				} else if (id == 2) {
					that.oder('OBSOLETE');
					this.types = 'OBSOLETE'
				} else if (id == 3) {
					that.oder('');
					this.types = ''
				} else {
					that.oder("UNUSED")
					this.types = 'UNUSED'
				}
			},
			link(item) {
				uni.navigateTo({
					url: '/pages/user/returnDetailById?cSaleReturnNo=' + item.cSaleReturnNo
				})
			},

			oder(s) {
				console.log(s)
				let that = this;
				// that.data = []
				that.$Request.post(
					that.$api.httpApi.user.getMemberGiftCardsList + '&token=' + that.$SysCache.get('token'), {
						param: {
							"orderBy": "createDate",
							"sequence": 1,
							status: this.num,
							pageSize: 10,
							pageIndex: that.pageIndex
						}
					}
				).then(res => {
					if (res.code == 200) {
						that.data = that.data.concat(res.data.MemberGiftCards)
						this.pageIndex++
						if (res.data.MemberGiftCards.length == 0) {
							uni.showToast({
								title: "没有更多了！",
								icon: "none"
							})
						}
					}
				});
			},
			turnGiftCard(id) {
				this.giftCardId = id
				this.promptVisible = true
			},
			deleteCard(id){
				let that = this
				uni.showModal({
					content:"确定删除该礼品卡？",
					success() {
						that.$Request.post(
							that.$api.httpApi.user.deleteCoupon + '&token=' + that.$SysCache.get('token'), {
						
								id:id
						
							}
						).then(res => {
							
							that.promptVisible = false
							that.data = []
							that.pageIndex = 1
							that.tab(this.num)
							if (res.code == 200) {
								uni.showToast({
									title:res.message,
									icon:'none'
								})
							}
						});
					}
				})
			},
			clickPromptConfirm(val){
				let that = this
				console.log(val)
				let data = {
					"conditions": [{
						"name": "phone",
						"value1": val,
						"type": "string",
						"op": "eq"
					}],
					"pager": {
						"pageIndex": 1,
						"pageSize": 1,
						"totalPage": 0,
						"totalCount": 0
					},
					"fields": [{
						"name": "mid"
					}]
				
				}
				this.$Request.post4(
					this.$api.httpApi.user.querys, data
				).then(res => {
					console.log(res)
					if(res.data.length>0){
						this.memberId= res.data[0].mid
					}
					
					
					that.$Request.post(
						that.$api.httpApi.user.transferGiftCard + '&token=' + that.$SysCache.get('token'), {
					
							"giftCardId": this.giftCardId,
							"memberId": this.memberId,
							"phone": val
					
						}
					).then(res => {
						that.promptVisible = false
						that.data = []
						that.pageIndex = 1
						that.tab(this.num)
						if (res.code == 200) {
							uni.showToast({
								title:res.message,
								icon:'none'
							})
						}
					});
				});
				
				
			}
		},



	}
</script>

<style scoped lang="less">
	.sup {
		width: 90%;
		display: block;
		margin: auto;
		height: 60rpx;
		background: rgba(240, 64, 111, 1);
		color: #fff;
		font-size: 26rpx;
		text-align: center;
		line-height: 60rpx;
		margin-top: 12rpx;
		border-radius: 42rpx;
	}

	.meng {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
	}

	.tan {
		width: 100%;
		height: 50%;
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		border-top-right-radius: 5rpx;
		border-top-left-radius: 5rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.tan .titles {
		height: 85rpx;
		line-height: 85rpx;
		font-size: 30rpx;
		border-bottom: 1px solid #dfdfdf;
		position: relative;
	}

	.tan .titles .closes {
		position: absolute;
		width: 85rpx;
		height: 85rpx;
		right: 0;
		text-align: center;
		line-height: 93rpx;
		top: 0;
	}

	.tan .titles image {
		display: inline-block;
		width: 32rpx;


	}

	.tan .conest {
		height: calc(100% - 85rpx - 90rpx);
		overflow: auto;
	}

	.tan .conest .liso {
		height: 90rpx;
		font-size: 26rpx;
		line-height: 90rpx;
		border-bottom: 1px dashed #ededed;
	}

	.tan .conest .liso image {
		display: inline-block;
		float: right;
		width: 28rpx;
		margin-top: 30rpx;
	}

	.butbox {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.info {
			font-size: 22upx;
			color: #999;
			line-height: 40upx;
		}
		.btn{
			font-size: 22upx;
			padding: 2upx 20upx;
			border: 1upx solid #999;
			color: #333;
		}
	}



	.both {
		display: block;
		clear: both;
	}

	.con {
		margin-top: 25rpx;
		margin-bottom: 25rpx;
	}

	.numb {
		width: 90rpx;
		text-align: right;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		display: inline-block;
		vertical-align: middle;
		margin-left: 68rpx;
	}

	.numb view {
		font-size: 18rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-top: 12rpx;
	}

	.con .text {
		display: inline-block;
		vertical-align: middle;
		width: 400rpx;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 30rpx;
		margin-left: 20rpx;
	}

	.con .text .bu {
		display: block;
		width: 162rpx;
		height: 31rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 5rpx;
		font-size: 18rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 30rpx;
		text-align: center;
		margin-top: 15rpx;
	}

	.con .img {
		display: inline-block;
		vertical-align: middle;
		width: 130rpx;
		height: 130rpx;
		background: rgba(255, 255, 255, 1);
		/* border: 1px solid rgba(228, 228, 228, 1); */
		border-radius: 5rpx;
		text-align: center;
		line-height: 130rpx;
	}

	.con .img image {
		display: inline-block;
		width: 100%;
		margin: auto;
		vertical-align: middle;
	}

	.li-up {
		height: 172upx;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		margin-bottom: 25rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		text {
			font-size: 56upx;
		}
	}

	.li-up .r {
		font-size: 30upx;
		color: rgba(240, 64, 111, 1);

	}

	.li-up .ri {
		float: right;
	}

	.ddlist .li {
		background: #f5f5f5;
		margin-top: 10rpx;
		padding: 20rpx;
	}

	.top {
		height: 62rpx;
		background: #040000;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(231, 231, 231, 1);
		text-align: center;
		display: flex;
		line-height: 62rpx;
		overflow-x: auto;
	}

	.top view {
		flex: 1;
		margin-left: 25rpx;
		margin-right: 25rpx;
		white-space: nowrap;
	}

	.active {
		border-bottom: 3rpx solid #F0406F;
		color: #F0406F;
	}

	uni-page-body {
		height: 100%;
		overflow: hidden;
	}

	.mord {
		height: 100%;
		overflow: hidden;
		background: #EEEEEE;
	}

	.ddlist {
		height: calc(100% - 62rpx);
		overflow: auto;
	}
</style>
